<template><!--登录组件-->
    <div class="login-form">
        <div class="g-form">
            <div class="g-form-line">
                <span class="g-form-label">用户名：</span>
                <div class="g-form-input">
                    <input type="text" placeholder="请输入用户名" v-model="usernameModel">
                </div>
                <span class="g-form-error">{{ userErrors.errorText }}</span>
            </div>
            <div class="g-form-line">
                <span class="g-form-label">密码：</span>
                <div class="g-form-input">
                    <input type="password" v-model="passwordModel" @keydown.enter="onLogin" placeholder="请输入密码">
                </div>
                <span class="g-form-error">{{ passwordErrors.errorText }}</span>
            </div>
            <div class="g-form-line">
                <div class="g-form-btn">
                    <a class="button" @click="onLogin">登录</a>
                </div>
            </div>
            <p class="logTitle">{{ errorText }}</p>
        </div>
    </div>
</template>

<script>
     export default {
        data () {
            return {
                usernameModel: '',
                passwordModel: '',
                errorText: ''
            }
        },computed: {
            userErrors () {
                let errorText, status
                if (!/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g.test(this.usernameModel)) { //如果没有@符号
                     status = false
                     errorText = "邮箱账号格式不正确"
                } else {
                    status = true
                    errorText = ''
                }
                if(!this.userFlag){
                    errorText = ''
                    this.userFlag= true
                }
                return {
                    status : status,
                    errorText : errorText   //ES6未简写
                }
            },
            passwordErrors () {
                let errorText, status
                if (!/^\w{6,11}$/g.test(this.passwordModel)){
                    status = false
                    errorText = '密码不是6到11位'
                } else {
                    status = true
                    errorText = ''
                }
                if(!this.passwordFlag){    //利用缓存，禁止显示提示,第一次进来这个数值如果不存在，就进入该方法，并添加该值，直到页面刷新
                    errorText = ''
                    this.passwordFlag = true 
                }
                return {
                    status: status,
                    errorText: errorText
                }
            }
        },
        methods:{
            onLogin () {
                if (!this.userErrors.status || !this.passwordErrors.status){
                    this.errorText = '部分选项未通过'
                }else {
                        this.errorText = ''
                        this.$http.get('api/login')
                        .then((res) => {
                          this.$emit('has-log', res.data) //发送一个
                        }, (error) => {
                          console.log(error)
                        })
                      }
          }
        }
     }
</script>
<style scoped>
   
</style>
